<template>
    <view class="price-selector">
        <u-popup :show="show" @close="handleClose" mode="bottom" :round="16">
            <view class="price-picker-container">
                <view class="picker-header">
                    <text class="cancel-btn" @click="handleCancel">取消</text>
                    <text class="confirm-btn" @click="handleConfirm">确定</text>
                </view>
                <picker-view class="price-picker" :value="[selectedIndex]" @change="onPickerChange">
                    <picker-view-column>
                        <view v-for="(price, index) in priceList" :key="index" class="picker-item">
                            <text class="price-value">{{ price.value }} 元</text>
                            <text v-if="price.isRecommended" class="recommended-tag">(建议价)</text>
                        </view>
                    </picker-view-column>
                </picker-view>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    name: "PriceSelector",
    props: {
        show: { type: Boolean, default: false },
        recommendedPrice: { type: Number, default: 0 },
        currentPrice: { type: Number, default: 0 }
    },
    data() {
        return {
            selectedPrice: 0,
            selectedIndex: 0,
            priceList: [],
            itemHeight: 72
        }
    },
    watch: {
        show(newVal) {
            if (newVal) {
                this.initPriceList();
                this.selectedPrice = (this.currentPrice && this.currentPrice > 0) ? this.currentPrice : this.recommendedPrice;
                this.updateSelectedIndex();
            }
        },
        recommendedPrice() {
            if (this.show) {
                this.initPriceList();
                this.updateSelectedIndex();
            }
        }
    },
    methods: {
        initPriceList() {
            if (!this.recommendedPrice || this.recommendedPrice <= 0) {
                this.priceList = [];
                return;
            }
            const priceList = [];
            const basePrice = this.recommendedPrice;
            for (let price = Math.max(1, basePrice - 30); price <= basePrice; price += 5) {
                priceList.push({
                    value: price,
                    label: `${price} 元`,
                    isRecommended: price === basePrice
                });
            }
            for (let price = basePrice + 5; price <= basePrice + 50; price += 5) {
                priceList.push({
                    value: price,
                    label: `${price} 元`,
                    isRecommended: false
                });
            }
            this.priceList = priceList;
        },
        selectPrice(price) {
            this.selectedPrice = price;
            this.updateSelectedIndex();
        },
        
        // 更新选中索引
        updateSelectedIndex() {
            const index = this.priceList.findIndex(item => item.value === this.selectedPrice);
            this.selectedIndex = index >= 0 ? index : 0;
        },
        
        // picker-view 变化事件
        onPickerChange(e) {
            const index = e.detail.value[0];
            if (index >= 0 && index < this.priceList.length) {
                this.selectedPrice = this.priceList[index].value;
                this.selectedIndex = index;
            }
        },
        handleCancel() {
            this.$emit("cancel");
        },
        handleConfirm() {
            const selectedItem = this.priceList.find(item => item.value === this.selectedPrice);
            if (selectedItem) {
                this.$emit("confirm", {
                    value: [selectedItem],
                    indexs: [this.priceList.findIndex(item => item.value === this.selectedPrice)]
                });
            }
        },
        		handleClose() {
			// 与u-picker保持一致，不发送update:show事件
		}
    }
}
</script>

<style scoped lang="scss">
.price-selector {
    .price-picker-container {
        background: #fff;
        border-radius: 32rpx 32rpx 0 0;
        overflow: hidden;
    }

    .picker-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 32rpx 40rpx;
        border-bottom: 2rpx solid #f5f5f5;
        position: relative;

        .cancel-btn {
            font-size: 32rpx;
            color: #999;
            padding: 16rpx;
        }

        .title {
            font-size: 36rpx;
            font-weight: 500;
            color: #333;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        .confirm-btn {
            font-size: 32rpx;
            color: #ff7937;
            font-weight: 500;
            padding: 16rpx;
        }
    }

    .price-picker {
        height: 420rpx;
        
        .picker-item {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 72rpx;
            padding: 0 40rpx;

            .price-value {
                font-size: 28rpx;
                color: #0b1f20;
                font-weight: 400;
            }

            .recommended-tag {
                font-size: 24rpx;
                color: #ff7937;
                margin-left: 8rpx;
            }
        }
    }
}
</style>